<template>
	<view class="all">
		<view class="header flex_sp">
			<u-search class="ipt" placeholder="搜索" v-model="keyword" :clearabled="true" searchIconColor="#FB774B"
				:showAction="false" @search="search()"></u-search>
			<image class="add" src="../../static/ming/three.png" mode="" @click="addaides()"></image>
		</view>
		<view class="body">
			<view class="box" v-for="(item , index) in list.support_worker" :key="index">
				<image class="img1" :src="'https://admin.lykangshu.top'+item.work_photos" mode=""></image>
				<view class="bottom">
					<view class="name">
						{{item.name}}
					</view>
					<view class="number">
						{{item.phone}}
					</view>
					<view class="last">
						<view class="info" @click="dele(item.id)">
							删除
						</view>
						<view class="info" v-show="item.status==1" @click="ban(item.id,item.status)">
							封禁
						</view>
						<view class="info" v-show="item.status==0" @click="ban(item.id,item.status)">
							启用
						</view>
						<view class="info2" @click="edit(item.id)">
							编辑
						</view>
					</view>
				</view>
				<view class="cary" v-show="item.presence==1">
					在线
				</view>
				<view class="cary2" v-show="item.presence==0">
					离线
				</view>
				<view class="cary" v-show="item.presence==2">
					已派单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				keyword: "", //搜索关键字
				list: [],
				id: "",
				states: "",
				page:1

			}
		},
		onShow() {
			this.getaddidelist()
		},
		onReachBottom() {
			// uni.showLoading()
			// setTimeout(()=>{
			// 	this.page+=1
			// 	uni.hideLoading()
			// },1000)
			// this.getaddidelist()
		},
		methods: {
			edit(i){
				uni.navigateTo({
					url:'/pages/mine/addaides/addaides?id='+i
				})
			},
			//搜索事件
			search(){
				this.getaddidelist()
			},
			//封禁护工
			ban(id, states) {
				this.id = id
				this.states = states
				this.banaddies()
			},
			//删除护工
			dele(i) {
				this.id = i
				this.deleaddie()
			},
			//封禁护工
			async banaddies() {
				const res = await this.$api("/business/user/ban", 'post', {
					id: this.id,
					status: this.states
				}).then((res) => {
					console.log(res);
					uni.$u.toast(res.data.msg)
					console.log("13131");
					this.getaddidelist()
				}).catch((err) => {
					console.log(err);
				})
			},
			//删除护工
			async deleaddie() {
				const res = await this.$api("/business/user/del_support_worker", 'post', {
					id: this.id
				}).then((res) => {
					console.log(res);
					uni.$u.toast(res.data.msg)
					this.getaddidelist()
				}).catch((err) => {
					console.log(err);
				})
			},
			//获取列表
			async getaddidelist() {
				const res = await this.$api("/business/user/support_worker", 'post', {
					offset: this.page,
					name: this.keyword
				}).then((res) => {
					console.log(res);
					this.list = res.data.data
				}).catch((err) => {
					console.log(err);
				})
			},
			//添加护工
			addaides() {
				uni.navigateTo({
					url: '/pages/mine/addaides/addaides'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		height: calc(100vh - 40px);
		display: flex;
		flex-direction: column;

		.header {
			padding: 15px;

			.ipt {
				flex: 1;
			}

			.add {
				margin: 0 10px;
				width: 24px;
				height: 24px;
			}
		}

		.body {
			padding: 15px 0 50px 0;
			// flex: 1;
			background-color: #f5f5f5;
			display: flex;
			flex-wrap: wrap;
			// justify-content: center;

			.box {
				position: relative;
				width: 45%;
				background: #FFFFFF;
				border-radius: 10px;
				margin: 9px;

				.img1 {
					width: 100%;
					// width: 164px;
					height: 160px;
				}

				.bottom {
					padding: 10px;

					.name {
						font-size: 14px;
						font-weight: bold;
						color: #333333;
						margin-bottom: 10px;
					}

					.number {
						font-size: 12px;
						font-weight: 400;
						color: #999999;
						margin-bottom: 10px;
					}

					.last {
						display: flex;
						align-items: center;

						.info {
							flex: 1;
							background: #EEEEEE;
							border-radius: 5px;
							font-size: 11px;
							font-weight: 400;
							color: #999999;
							padding: 5px;
							text-align: center;
							margin: 0 5px;
						}

						.info2 {
							flex: 1;
							margin: 0 5px;
							text-align: center;
							padding: 5px;
							background: #FB774B;
							border-radius: 5px;
							font-size: 11px;
							font-weight: 400;
							color: #FFFFFF;
						}
					}
				}

				.cary {
					position: absolute;
					top: 0;
					left: 0;
					background: #FB774B;
					border-radius: 10px 0px 10px 0px;
					padding: 5px 10px;
					font-size: 12px;
					font-weight: 400;
					color: #FFFFFF;
				}

				.cary2 {
					position: absolute;
					top: 0;
					left: 0;
					background: #CCCCCC;
					border-radius: 10px 0px 10px 0px;
					padding: 5px 10px;
					font-size: 12px;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}
	}
</style>